import Layout from "@theme/Layout";
import React, { useEffect, useState } from "react";
import { useSdkSignup } from "../util/use-sdk-signup";
import clsx from "clsx";
import { LoadingIcon } from "../components/LoadingIcon";
import { IconMailFilled } from "@tabler/icons-react";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";

export default function SdkSignUp() {
  // get query parameters
  const { company, serviceName, language } = getParameters();
  const { handleSubmit, signedUp, email, setEmail, loading } = useSdkSignup({
    company,
    serviceName,
    language,
  });
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Change the visibility after a delay (e.g., 500ms)
    const timer = setTimeout(() => {
      setIsVisible(true);
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  return (
    <Layout
      title={`${company} ${serviceName} API ${language} SDK`}
      description={`SDK Signup Form for ${company} ${serviceName} API ${language} SDK`}
    >
      <div
        className={clsx("bg-gradient-to-bl py-56 from-blue-950 to-blue-700")}
      >
        <div
          className={clsx(
            "transition-all duration-500 text-blue-300 text-center mx-auto max-w-3xl px-2",
            {
              "opacity-1": isVisible,
              "opacity-0 translate-y-40": !isVisible,
            }
          )}
        >
          <h1
            className={clsx(
              "mx-auto text-4xl mb-4 font-bold max-w-sm sm:max-w-3xl text-blue-50"
            )}
          >
            Sign up to install {company}'s {language} SDK
          </h1>
          <p className="text-lg max-w-sm sm:max-w-xl mx-auto sm:text-xl">
            Easily Integrate {company}'s {serviceName} API using Konfig's{" "}
            {language} SDK
          </p>
          <form
            onSubmit={handleSubmit}
            id="signup"
            className="mx-auto max-w-sm md:max-w-lg"
          >
            <div className="flex items-center mb-3">
              {signedUp ? (
                <div className="text-white">
                  Thanks for signing up for {company}'s {language} SDK. You have
                  been added to the waitlist and will be notified as soon as the
                  SDK is available 🎉.
                </div>
              ) : (
                <div className="mr-2 w-full relative">
                  <div className="absolute bottom-0 top-0 left-0 pl-3 flex items-center">
                    <IconMailFilled className="w-5 h-5 text-slate-300" />
                  </div>
                  <input
                    type="email"
                    name="email"
                    className="w-full text-black text-sm p-3 pl-10 rounded-md"
                    placeholder="Enter your email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
              )}
              <div className="shrink-0">
                {signedUp ? null : (
                  <button
                    type="submit"
                    className="font-medium bg-gradient-to-br text-white text-center px-5 py-3 from-blue-600 to-blue-800 rounded-md text-sm"
                  >
                    {loading ? <LoadingIcon /> : <div>Sign up</div>}
                  </button>
                )}
              </div>
            </div>
            {signedUp ? null : (
              <div className="text-left text-blue-400 font-medium text-sm">
                SDK Generated by{" "}
                <a
                  target="_blank"
                  className="text-blue-50 hover:no-underline hover:text-blue-300"
                  href="https://konfigthis.com"
                >
                  Konfig
                </a>
              </div>
            )}
          </form>
        </div>
      </div>
    </Layout>
  );
}

function getParameters(): {
  company: string;
  serviceName: string;
  language: string;
} {
  if (ExecutionEnvironment.canUseDOM) {
    const urlParams = new URLSearchParams(window.location.search);
    const company = urlParams.get("company") ?? "";
    const serviceName = urlParams.get("serviceName") ?? "";
    const language = urlParams.get("language") ?? "";
    return { company, serviceName, language };
  }
  return { company: "", serviceName: "", language: "" };
}
